<!-- ExamDetailList.vue -->
<template>
  <div class="exam-detail">
    <div class="header">
      <h1>监考安排表 / 监考详细名单</h1>
      <div class="back-btn" @click="goBack">返回</div>
    </div>

    <div class="search-bar">
      <input
          v-model="searchKeyword"
          type="text"
          placeholder="请输入监考人姓名/工号关键词查询"
          class="search-input"
      >
      <button class="search-btn" @click="search">查询</button>
    </div>

    <div class="table-container">
      <table class="detail-table">
        <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>工号</th>
          <th>所在单位</th>
          <th>身份证号</th>
          <th>移动电话</th>
          <th>监考职责</th>
          <th>监考场次</th>
          <th>考场名称</th>
          <th>监考时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person, index) in filteredPersons" :key="person.id">
          <td>{{ index + 1 }}</td>
          <td>{{ person.name }}</td>
          <td>{{ person.gender }}</td>
          <td>{{ person.employeeId }}</td>
          <td>{{ person.department }}</td>
          <td>{{ person.idNumber }}</td>
          <td>{{ person.phone }}</td>
          <td>{{ person.role }}</td>
          <td>{{ person.session }}</td>
          <td>{{ person.room }}</td>
          <td>{{ person.time }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 获取批次ID
const batchId = ref(Number(route.params.id));
const searchKeyword = ref('');

// 模拟监考人员数据
const examPersons = ref([
  {
    id: 1,
    name: 'QIANJIAXIN1',
    gender: '男',
    employeeId: '10001',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    role: '副监考',
    session: '4',
    room: '110',
    time: '12月25日全天，12月26日全天'
  },
  {
    id: 2,
    name: 'QIANJIAXIN2',
    gender: '男',
    employeeId: '10002',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    role: '副监考',
    session: '4',
    room: '110',
    time: '12月25日全天，12月26日全天'
  },
  {
    id: 3,
    name: 'QIANJIAXIN3',
    gender: '男',
    employeeId: '10003',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    role: '主监考',
    session: '2',
    room: '201',
    time: '12月25日上午'
  },
  {
    id: 4,
    name: 'QIANJIAXIN4',
    gender: '女',
    employeeId: '10004',
    department: '电子信息学院',
    idNumber: '420116199001015678',
    phone: '13800138000',
    role: '副监考',
    session: '3',
    room: '305',
    time: '12月26日全天'
  },
  {
    id: 5,
    name: 'QIANJIAXIN5',
    gender: '男',
    employeeId: '10005',
    department: '机械工程学院',
    idNumber: '420116198511112222',
    phone: '13900139000',
    role: '主监考',
    session: '1',
    room: '101',
    time: '12月25日下午'
  }
]);

// 过滤人员数据
const filteredPersons = computed(() => {
  if (!searchKeyword.value) return examPersons.value;
  const keyword = searchKeyword.value.toLowerCase();
  return examPersons.value.filter(person =>
      person.name.toLowerCase().includes(keyword) ||
      person.employeeId.toLowerCase().includes(keyword)
  );
});

// 搜索
const search = () => {
  console.log('搜索关键词:', searchKeyword.value);
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  console.log('加载批次ID:', batchId.value);
});
</script>

<style scoped>
.exam-detail {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #1a2b4b;
}

.back-btn {
  padding: 8px 20px;
  background-color: #f0f2f5;
  color: #1a2b4b;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #e2e8f0;
}

.search-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 10px 20px;
  background-color: #1a3a6c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #0d2a56;
}

.table-container {
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.detail-table th,
.detail-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

.detail-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #1a2b4b;
}

.detail-table tr:hover {
  background-color: #f8fafc;
}
</style>